<template>
  <div id="rightTop">
    <span>最后一次修改时间：{{ title }}</span>
    <a-button style="margin-left: 10px" @click="publish">发布</a-button>
  </div>
  <a-textarea
    id="text1"
    v-model:value="value"
    showCount
    :maxlength="1000"
    :rows="10"
  />
  <div class="clearfix">
    <a-upload
      name="PicturesOfDy"
      action="http://localhost:3000/createD/imgDynamic"
      :data="{ did: did }"
      list-type="picture-card"
      v-model:file-list="fileList"
      @preview="handlePreview"
      :remove="handleRemove"
    >
      <div v-if="fileList.length < 8">
        <plus-outlined />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import VueEvent from "../../utils/event";
import { openDynamic, deleteDyPic } from "../../api/create";
import { message } from "ant-design-vue";
import { formatTime } from "../../utils/date";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default defineComponent({
  setup() {
    const value = ref("");
    const did = ref("");
    const title = ref("");
    const previewVisible = ref(false);
    const previewImage = ref("");
    const fileList = ref([]);

    const publish = () => {
      let dateNow = formatTime();
      openDynamic({
        url: "/createD/openDynamic",
        did: did.value,
        showTime: dateNow,
        content: value.value,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    VueEvent.on("MsBody", (e) => {
      // console.log(e);
      did.value = e.did;
      title.value = e.MsTitle;
      value.value = e.content;
      fileList.value.length = 0;
      for (let i = 0; i < e.picList.length; i++) {
        fileList.value.push({
          uid: -i,
          status: "done",
          url: e.picList[i].url,
        });
      }
      // VueEvent.all.clear();
    });

    const handleCancel = () => {
      previewVisible.value = false;
    };

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
    };

    const handleRemove = (file) => {
      // console.log(file);
      deleteDyPic({
        url: "/createD/deleteDyPic",
        did: did.value,
        picUrl: file.url,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const handleChange = ({ fileList: newFileList }) => {
      fileList.value = newFileList;
    };

    return {
      title,
      publish,
      did,
      value,
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      handleChange,
      handleRemove,
    };
  },

  components: {
    PlusOutlined,
  },
});
</script>
        
<style scoped>
#rightTop {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 10px 10px 10px;
}
</style>
